<template>
  <div>
    <div class="info">
      <div class="touImg">
        <img v-if="info.avatar !== '-'" :src="info.avatar" alt="" />
        <img v-else src="../../../static/avant.png" alt="" />

        <span>{{ info.nickName }}</span>
      </div>
      <div class="detailBox">
        <div class="title">
          <span class="bt">用户资产</span>
          <el-button size="mini" type="primary" @click="handleCoin()">
            积分详情</el-button>
          <el-button size="mini" type="primary" @click="handleRecommended()">
            推荐用户列表</el-button>
        </div>
        <div class="listBox">
          <div class="list">
            <div class="name">
              <div class="nameMax">CoCo</div>
              <div class="nameMin">(可使用/已冻结/全部)</div>
            </div>
            <div class="numBox">
              <span class="sp_1">{{ info.cocoUsed }}</span>/<span>{{ info.cocoFreeze }}</span>/<span>{{ info.cocoTotal }}</span>
            </div>
          </div>
          <div class="list">
            <div class="name">
              <div class="nameMax">椰分</div>
              <div class="nameMin">(可使用/已冻结/全部)</div>
            </div>
            <div class="numBox">
              <span class="sp_1">{{ info.tfUsed }}</span>/<span>{{ info.tfFreeze }}</span>/<span>{{ info.tfTotal }}</span>
            </div>
          </div>
          <div class="list">
            <div class="name">
              <div class="nameMax">赚卡</div>
              <div class="nameMin">(待使用)</div>
            </div>
            <div class="numBox">
              <span class="sp_1">{{ info.usedCardCount }}</span>
            </div>
          </div>
          <div class="list">
            <div class="name">
              <div class="nameMax">组队权益</div>
              <div class="nameMin">(待使用)</div>
            </div>
            <div class="numBox">
              <span class="sp_1">{{ info.punchCount }}</span>
            </div>
          </div>
          <div class="list">
            <div class="name">
              <div class="nameMax">盲盒券</div>
              <div class="nameMin">(待使用/已使用/全部)</div>
            </div>
            <div class="numBox">
              <span
                class="sp_1">{{ info.boxCouponUsable }}</span>/<span>{{ info.boxCouponUsed }}</span>/<span>{{ info.boxCouponTotal }}</span>
            </div>
          </div>
          <div class="list">
            <div class="name">
              <div class="nameMax">权益卡</div>
            </div>
            <div class="numBox">
              <span class="sp_1">{{ info.equityCardCount }}</span>
            </div>
          </div>
          <div class="list">
            <div class="name">
              <div class="nameMax">勋章</div>
            </div>
            <div class="numBox">
              <span class="sp_1">{{ info.medalCount }}</span>
            </div>
          </div>
          <div class="list">
            <div class="name">
              <div class="nameMax">推荐用户数</div>
            </div>
            <div class="numBox">
              <span class="sp_1">{{ info.recommendCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="information">
      <div class="list back">会员ID</div>
      <div class="list">{{ info.id }}</div>
      <div class="list back">用户状态</div>
      <div class="list">{{ info.statusName }}</div>
      <div class="list back">注册时间</div>
      <div class="list">{{ info.createTime }}</div>

      <div class="list back">手机号</div>
      <div class="list">{{ info.phoneNumber }}</div>
      <div class="list back">是否实名认证</div>
      <div class="list">{{ info.realStatusName }}</div>
      <div class="list back">渠道来源</div>
      <div class="list">{{ info.sourceName }}</div>

      <div class="list back">姓名</div>
      <div class="list">{{ info.name }}</div>
      <div class="list back">性别</div>
      <div class="list">{{ info.sex }}</div>
      <div class="list back">邀请人</div>
      <div class="list">{{ info.invitedName }}</div>

      <div class="list back">年龄</div>
      <div class="list">{{ info.age }}</div>
      <div class="list back">生日</div>
      <div class="list">{{ info.birthday }}</div>
      <div class="list back">钱包地址</div>
      <div class="list">{{ info.accountAddress }}</div>

      <div class="list back noBor">籍贯</div>
      <div class="list noBor">{{ info.nativePlace }}</div>
      <div class="list back noBor">身份证号</div>
      <div class="list noBor">{{ info.idCard }}</div>
      <div class="list back noBor">算力/产值系数</div>
      <div class="list noBor">{{ info.hashRate }}/{{ info.outPutValue }}</div>

    </div>
  </div>
</template>
  
<script>
import {
  getCustomerBaseMsg,
} from "@/api/members/membersDetail";
export default {
  name: "Customer",
  components: {

  },
  props: {
    id: String,
  },
  data() {
    return {
      current: 1,
      navList: [
        { id: 1, value: '基本信息' },
        { id: 2, value: '神椰板块' },
        { id: 3, value: '卡优优板块' },
      ],
      info: {},
    };
  },
  computed: {

  },
  created() {
    this.getDetail()
  },
  methods: {
    /* 切换选项 */
    handleNav(id) {
      this.current = id
    },

    getDetail() {
      this.loading = true;
      getCustomerBaseMsg(this.id).then(res => {
        this.info = res.result
        for (var key in this.info) {
          if (this.info[key] === '') {
            this.info[key] = "-";
          }
        }
        this.loading = false;
      });
    },

    //积分详情
    handleCoin() {
      this.$router.push({
        path: "/members/coin-detail",
        query: {
          id: this.id,
        },
      })
    },

    //推荐用户列表
    handleRecommended() {
      this.$router.push({
        path: "/members/recommended-list",
        query: {
          id: this.id,
        },
      })
    },

  }
};

</script>
<style lang="scss" scoped>
.info {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .touImg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    span {
      margin-top: 10px;
      font-size: 14px;
      color: #222;
      font-weight: 600;
    }
  }

  .detailBox {
    background: #f5f5f5;
    margin-left: 30px;
    padding: 30px;
    flex: 1;

    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .bt {
        font-size: 18px;
        font-weight: 600;
        margin-right: 40px;
      }
    }

    .listBox {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .list {
        width: 25%;
        display: flex;
        flex-direction: column;
        padding-top: 30px;

        .name {
          display: flex;
          justify-content: flex-start;
          align-items: baseline;

          .nameMax {
            color: #222;
            font-size: 16px;
          }

          .nameMin {
            font-size: 12px;
            color: #999;
            margin-left: 14px;
          }
        }

        .numBox {
          color: #1890ff;
          margin-top: 14px;

          span {
            font-size: 14px;
          }

          .sp_1 {
            font-size: 18px;
            font-weight: 600;
          }
        }
      }
    }
  }
}

.information {
  border: 1px solid #dfe6ec;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 20px;

  .back {
    background: #f5f5f5;
    font-size: 16px;
    font-weight: 600;
  }

  .list {
    width: 16.666%;
    padding: 18px 0;
    text-align: center;
    font-size: 16px;
    color: #606266;
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
    word-wrap: break-word;
  }

  .noBor {
    border-bottom: none !important;
  }
}</style>
  